<template>
    <div class="row mhht-wrap">
        <div class="mhht-title">
            热门分类
        </div>
        <div class="row mhht-contentWrap">
            <div v-for="(v,i) of showImages" :key="i" class="mhht-content">
                <div class="mhht-imgWrap">
                    <img :src="v.image" alt="">
                </div>
                <span>{{v.title}}</span>
            </div>
        </div>
    </div>
  
</template>

<script>
export default {
    computed:{
        showImages(){
            return this.$store.getters.hotTypeImages;
        }
    },
    mounted(){
        this.$store.dispatch("loadHotTypeData");
    }
  
}
</script>

<style lang="less">
@heights:0.8rem;
    .mhht-wrap{
        >.mhht-title{
            color:#555;
            font-size: 0.25rem;
            text-align: center;
            height:@heights;
            line-height: @heights;
            background: url('../../static/image/upload.png') 50% 50% no-repeat ;
        }
        >.mhht-contentWrap{
            display: flex;
            flex-flow: row wrap;
            background-color: #fff;
            >.mhht-content{
                width: 25%;
                text-align: center;
                padding:0.2rem 3% 0;
                color:#777;
                >.mhht-imgWrap{
                    width:100%;
                    img{
                        width:100%;
                    }
                }   

            }
        }
    }

</style>
